import React from 'react';
import { FaFile, FaClock } from 'react-icons/fa6';
import styles from './FileBar.module.css';

const FileBar = ({ fileName, filePath, lastSaved }) => {
  // 格式化最后保存时间
  const formatLastSaved = (date) => {
    if (!date) return null;
    
    const now = new Date();
    const savedTime = new Date(date);
    const diffMs = now - savedTime;
    const diffMins = Math.floor(diffMs / 60000);
    const diffHours = Math.floor(diffMs / 3600000);
    const diffDays = Math.floor(diffMs / 86400000);
    
    if (diffMins < 1) {
      return '刚刚保存';
    } else if (diffMins < 60) {
      return `${diffMins}分钟前保存`;
    } else if (diffHours < 24) {
      return `${diffHours}小时前保存`;
    } else if (diffDays < 7) {
      return `${diffDays}天前保存`;
    } else {
      return savedTime.toLocaleDateString('zh-CN', {
        month: 'short',
        day: 'numeric',
        hour: '2-digit',
        minute: '2-digit'
      });
    }
  };

  return (
    <div className={styles.fileBar}>
      <div className={styles.fileIcon}>
        <FaFile />
      </div>
      <div className={styles.fileInfo}>
        <span className={styles.fileName}>{fileName || '未命名文件'}</span>
        {filePath && filePath !== fileName && (
          <span className={styles.filePath}>{filePath}</span>
        )}
      </div>
      <div className={styles.fileActions}>
        {lastSaved && (
          <div className={styles.lastSaved}>
            <FaClock className={styles.clockIcon} />
            <span className={styles.lastSavedText}>
              {formatLastSaved(lastSaved)}
            </span>
          </div>
        )}
      </div>
    </div>
  );
};

export default FileBar;
